<template>
  <div style="width: 100%; height: 600px">
    <div ref="mapContainer" id="chart" style="width: 100%; height: 600px"></div>
    <button @click="setHigh" style="position: fixed;top: 10px;">点亮</button>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-gl";
import mapOptions from "./map_options.js";

export default {
  name: "Echarts3DMap",
  data() {
    return {
      index: 1,
      myChart: null,
      mapOptions
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  methods: {
    setHigh() {

    },
    initChart() {
      fetch("https://geo.datav.aliyun.com/areas_v3/bound/150000_full.json")
      // fetch("https://geo.datav.aliyun.com/areas_v2/bound/100000.json")
      // fetch("https://geo.datav.aliyun.com/areas_v3/bound/100000.json")
          .then((response) => response.json())
          .then((data) => {
            echarts.registerMap("china", {geoJSON: data});
            this.myChart = echarts.init(this.$refs.mapContainer);

            this.myChart.setOption(this.mapOptions);
            // // 监听点击事件
            this.myChart.on("click", (params) => {
              console.log("Clicked params:", params);
            });
          });
    },
    handleMapClick(params) {
      // 处理点击事件，params 中包含点击的信息
      alert(`点击了 ${params.name}`);
    },
  },
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.dispose();
    }
  },
};
</script>

<style scoped>
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #2c3e50;
}
</style>